import React, { Component } from "react";
import Footer from "../../components/Footer";
import { Link } from "react-router-dom";
import { inject , observer} from "mobx-react";
import "./index.scss";

class My extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }
  state = {};

  // 退出登录
  logout(){
    this.props.store.updatePhone('');
    this.props.store.updateToken('');
  }


  render() {
    let { phone, token } = this.props.store;

    console.log(this.props);
    return (
      <div className="my-index">
        {/* 头部背景及登录头像 */}
        <div className="my-top fdc jc-c">
          <div className="my-box flex jc-c">
            {!!token ? (
              <div className="flex aic ml-20">
                <p className="login fff ml-10 f16 iconfont icon-v1"></p><p className="phone fff ml-5">{phone}</p>
              </div>
              ) : (<div>
                <img
                  src=""
                  alt=""
                />
                <Link to="/login" className="login fff ml-10 f16">
                  立即登录
                </Link>
              </div>)}
          </div>
        </div>

        {/* 列表 */}
        <div className="content mt-10">
          <ul className="list body wrap jc-c bg-fff">
            <Link to="#" className="item flex jc-sb aic">
              <p>我的订单</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <Link to="#" className="item flex jc-sb aic">
              <p>我的共享卡</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <Link to="#" className="item flex jc-sb aic">
              <p>我的优惠券</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <Link to="/love" className="item flex jc-sb aic">
              <p>我想去</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <Link to="/browse" className="item flex jc-sb aic">
              <p>我的足迹</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <Link to="#" className="item flex jc-sb aic">
              <p>设置</p>
              <p className="iconfont icon-xiangyou1"></p>
            </Link>

            <div className="item flex jc-sb aic" onClick={this.logout}>
              <p>退出登录</p>
              <p className="iconfont icon-xiangyou1"></p>
            </div>
          </ul>
        </div>

        <Footer name="my" />
      </div>
    );
  }
}

export default inject("store")(observer(My));

// export default My;
